<template>
  <div id="app">
    <div class="containers" ref="content">
        <div class="canvas" ref="canvas"></div>
        <div class="bpmn-js-properties-panel" id="js-properties-panel"></div>
        <div class= button-tool>
        <button @click="persistProcess">保存</button>
        <!-- <button  @click="back">返回</button> -->
    </div>

  </div>
  </div>

</template>

<script>
// 引入相关的依赖
// import BpmnViewer from 'bpmn-js'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

// import propertiesProviderModule from './customTranslate/providerModule'
import proppertisePancelModule from 'bpmn-js-properties-panel'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import customTranslate from './customTranslate/customTranslate'
import { xmlStr } from '../mock/xmlStr'
export default {
  name: 'custom-properties-panel',
  components: {
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init()
  },
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  // 方法集合
  methods: {
    persistProcess() {
    // Save XML
    this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
        if (err) {
            console.error(err);
            return;
        }
        
        // Assign XML data to jsonXml
        const jsonXml = xml;

        // Save SVG
        this.bpmnModeler.saveSVG({ format: true }, (err, data) => {
            if (err) {
                console.error(err);
                return;
            }
            
            // Assign SVG data to svgXml
            const svgXml = data;

        
          alert('看打印结果就是要传给后台的xml文件，有XML主要是流程设计使用，SVG主要是预览使用')
           console.log ('json格式:'+jsonXml ,'svg格式:'+svgXml )
            // Send the request
          
        });
    });
},
    init() {
      // 获取到属性ref为“content”的dom节点
      this.container = this.$refs.content
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模
      const customTranslateModule = {
        translate: ['value',customTranslate]
      }
      this.bpmnModeler = new BpmnModeler({
        container: canvas,

        propertiesPanel:{
          parent:'#js-properties-panel'
        },
        additionalModules:[
          // proppertisePancelModule,
          propertiesProviderModule,
          proppertisePancelModule,
          customTranslateModule

        ],
        moddleExtensions:{
          camunda:camundaModdleDescriptor
        }
      })
      this.createNewDiagram()
    },
    createNewDiagram() {
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(xmlStr, err => {
        if (err) {
          // console.error(err)
        } else {
          // 这里是成功之后的回调, 可以在这里做一系列事情
          this.success()
        }
      })
    },
    success() {
      // 给图绑定事件，当图有发生改变就会触发这个事件
      const that = this
      this.bpmnModeler.on('commandStack.changed', function() {
        that.saveDiagram(function(err, xml) {
          console.log(xml)
        })
      })
    },
    // 下载为bpmn格式,done是个函数，调用的时候传入的
    saveDiagram(done) {
      // 把传入的done再传给bpmn原型的saveXML函数调用
      this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
        done(err, xml)
      })
    }
  },
  // 计算属性
  computed: {}
}
</script>

<style >
.containers {
  background-color: #ffffff;
  width: 100%;
  height: 80vh;
  display: flex;
  position: relative;
}
.canvas {
  width:calc(100% - 300px);
  height: 80vh;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
.bpmn-js-properties-panel{
  width:320px;
  height: inherit;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
.button-tool {
width:200px;
position: absolute;
bottom:0;
left: 100px;
display:flex;    
justify-content: space-evenly;
}
</style>